<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>皮尔力台球杆</p>
    <p>购买数量： 
        <button>-</button> 
        <input type="text" name="price" value="2">
        <button>+</button>
    </p>
    <script>
        /**
         * 1. 减少数量的时候，不能少于 1 个
         * 2. 增加数量的时候，不能超过库存 5
         * 
         */

        // 1. 获取相关元素
        var oInput = document.querySelector('input');
        var oBtns = document.querySelectorAll('button');
        var reduceBtn = oBtns[0];
        var addBtn = oBtns[1];
        var Inventory = 5; // 库存数量
        // 2. 给按钮绑定单击事件
        reduceBtn.onclick = function(){
            // 1. 获取原来的数量
            // 2. 减少一个
            // 3. 在赋值回去
            var num = +oInput.value; // 获取原来的值，并转化为数字
            num--;
            // if(num < 1){
            //     num = 1;
            // }
            num = Math.max(1, num);
            oInput.value = num;
        }

        // 3. 增加
        addBtn.onclick = function(){
            var num = +oInput.value;
            num++;
            // 超过库存数量，就等于库存数量
            // if(num > Inventory){
            //     num = Inventory
            // }
            num = Math.min(Inventory, num);
            oInput.value = num;
        }
    </script>
</body>
</html>